<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-20 09:06:50
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-19 13:51:08
 * @FilePath: \company-world\src\views\homepage\components\NoticeAnnouncement.vue
 * @Description: 通知公告
-->
<template>
  <section class="notice-announcement">
    <div class="title">
      <span>通知公告</span>
      <div class="total">{{ unreadList && unreadList.length }}</div>
    </div>
    <div class="notices">
      <template v-if="nocticeLists">
        <ul v-for="item in nocticeLists" :key="item.id" class="notice">
          <li class="notice-item" @click.stop="handleOpenClick(item)">
            <div class="left">
              <el-badge :is-dot="!item.is_read" class="item">{{ item.type }}</el-badge
              >{{ item.data_title }}
            </div>
            <div class="right">
              {{ item.created_at.slice(0, 10) }}
            </div>
          </li>
        </ul>
      </template>
      <el-empty v-else description="暂无数据" :image-size="100"></el-empty>
    </div>
    <!-- 公告详情 -->
    <Detail
      :dialog="dialog"
      :activeList="activeList"
      @handleSave="handleSave"
      @handle-close-click="handleClose"
    ></Detail>
  </section>
</template>

<script lang="ts" setup>
import { Itype } from '@/type/index'
import { computed, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import Detail from './components/Detail.vue'
import { getNoticeList, editNoticeData, editNceUserData } from '@/apis/system/notice'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { forEach } from 'lodash'
/**
 * @desc: 打开dialog
 */
// 接收人id
const recipientId = ref(0)
// 详情开启关闭
const dialog = ref(false)
// 点击词条数据
let activeList = ref({})
// 点击词条id
let index = ref(0)
const handleOpenClick = (data: { id: number }) => {
  dialog.value = true
  recipientId.value = data.id
  activeList.value = data
  // index.value = id
  // nocticeLists.value.forEach((item: Itype) => {
  //   if (item.id === index.value) {
  //     activeList.value = item
  //     item?.user_notice?.forEach((element: Itype) => {
  //       if (element.user_id === getUserInfo.value.id) {
  //         recipientId.value = element.id
  //       }
  //     })
  //   }
  // })
}
/**
 * @desc: 关闭dialog
 */
const handleClose = () => {
  dialog.value = false
  getData()
}
/**
 * @desc: 保存关闭dialog
 */
const handleSave = () => {
  dialog.value = false
  editReadState()
}
/**
 * @desc:获取登录用户信息
 */
const getUserInfo = computed(() => {
  return JSON.parse(localStorage.getItem('user') as string) || ''
})
/**
 * @desc:获取菜单列表数据
 *
 */
// 未读数据
let unreadList: Itype = ref()
// 已读数据
let readList: Itype = ref()
// 公告数据(私有)
let nocticeLists: any = ref([])
const loading = ref(false)
let pager = ref({
  total: 0
})
let dataLists: Itype = ref()
const getData = () => {
  loading.value = true
  let params = {}
  let total: Itype = ref(0)
  getNoticeList(params)
    .then((res) => {
      if (res.rows) {
        dataLists.value = res.rows
        total.value = res.total
        dataLists.value.forEach((element: Itype) => {
          element.created_at = new Date(
            +new Date(new Date(element.created_at).toJSON()) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
        })
        nocticeLists.value = []
        for (let i = 0; i < dataLists.value.length; i++) {
          ;(dataLists.value[i]?.recipient_id).find((res: number) => {
            if (Number(res) === getUserInfo.value.id) {
              nocticeLists.value.push(dataLists.value[i])
            }
          })
        }
        readList.value = nocticeLists.value.filter((item: Itype) => item.is_read === 1)
        unreadList.value = nocticeLists.value.filter((item: Itype) => item.is_read === 0)
        loading.value = false
      }
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}
getData()
/**
 * @desc: 徽章状态
 */
// const isRead = (item: Itype) => {
//   return item.user_notice.find((res: { user_id: number }) => {
//     return res.user_id === getUserInfo.value.id
//   })
// }
/**
 * @desc: 修改通知公告已读状态
 */
const editReadState = () => {
  let params = {
    _id: recipientId.value,
    is_read: 1
  }
  editNoticeData(params)
    .then((res) => {
      if (!res) return
      getData()
    })
    .catch(() => {
      ElMessage('服务器内部错误！')
    })
}
</script>

<style lang="less" scoped>
.hidden::-webkit-scrollbar-thumb {
  background-color: transparent !important;
}
.hidden::-webkit-scrollbar {
  background-color: transparent !important;
}
.notice-announcement {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 49%;
  padding: 16px 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 6px;
  .title {
    display: flex;
    span {
      color: #2a2f3d;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      line-height: 24px;
      letter-spacing: 1px;
    }
    .total {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 18px;
      margin: 3px 0 0 4px;
      background: #33bbff;
      color: #fff;
      border-radius: 10px;
    }
  }
  .notices {
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    height: 0;
    padding-top: 6px;
    box-sizing: border-box;
    flex-shrink: 0;
    .notice {
      .notice-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 4.5px 0px;
        box-sizing: border-box;
        .left {
          display: flex;
          justify-content: center;
          align-items: center;
          .item {
            width: 34px;
            height: 18px;
            margin-right: 10px;
            background: #f0eaff;
            color: #9c86ff;
            line-height: 18px;
            font-size: 12px;
            font-family: YouSheBiaoTiHei;
            text-align: center;
            white-space: nowrap;
            flex-shrink: 0;
            border-radius: 2px;
          }
        }
        .right {
          padding-right: 8px;
          color: #6d768f;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
        }
      }
    }
    .el-empty {
      padding-top: 150px;
    }
  }
  .notices::-webkit-scrollbar {
    width: 12px;
  }
  .notices::-webkit-scrollbar-track-piece {
    /*鼠标移动上去再显示滚动条*/
    background-color: #fff;
    /* 滚动条的背景颜色 */
    border-radius: 6px;
    /* 滚动条的圆角宽度 */
  }
  .notices::-webkit-scrollbar-thumb {
    background: rgba(220, 221, 224, 0.5);
  }
  .notices::-webkit-scrollbar-thumb:vertical {
    border: 2px solid #fff;
    background: rgba(220, 221, 224, 0.5);
    border-radius: 6px;
    outline: 2px solid #fff;
    outline-offset: -2px;
  }
}
</style>

function editNceUserData(params: { _id: number; is_read: number }) {
  throw new Error('Function not implemented.')
}
